<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 10:43:44
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-01-31 16:31:14
 * @FilePath: \vue-admin-template\src\views\projectManagement\reviewSheet\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="distribution">
        <el-dialog title="" :visible.sync="showDetail" width="550px" :before-close="handleClose">
            <div style="text-align: center;">
                <span style="font-size: 20px;color: #3F3F3F;">{{ id ? '修改' : '新增' }}</span>
                <div style="margin-top: 30px;display: flex;text-align: center;margin-left: 20px;">
                    <el-form :rules="rules" ref="form" :model="form" label-width="90px">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="form.username" style="width: 280px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" style="width: 280px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="部门" prop="department">
                            <el-input v-model="form.department" style="width: 280px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="tel">
                            <el-input  auto-complete="new-password" v-model="form.tel" style="width: 280px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" style="width: 280px;" clearable></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="noraml-btn" @click="handleClose">取 消</el-button>
                <el-button class="noraml-btn" type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>

export default {
    props: {
        showDetail: {
            type: Boolean
        },
        id: {
            type: [String, Number]
        },
    },
    data() {
        return {
            rules: {
                username: [
                    { required: true, message: '请填写用户名', trigger: ['blur', 'change'] }
                ],
                name: [
                    { required: true, message: '请填写姓名', trigger: ['blur', 'change'] }
                ],
                department: [
                    { required: true, message: '请填写部门', trigger: ['blur', 'change'] }
                ],
                tel: [
                    { required: true, message: '请填写电话', trigger: ['blur', 'change'] }
                ]
            },
            form: {
                username: '',
                name: '',
                department: '',
                tel: '',
                remark: ''
            }
        }
    },
    mounted() {
        if(this.id) {
            this.$baseRequestGetParams("/sys/user/getInfo", {id: this.id}, {}, "get").then(
                (res) => {
                  this.form = res.data;
                }
            )
        }
    },
    methods: {

        handleClose(done) {
            this.$emit('closeDetail')
        },
        save() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    let url = this.id ? '/sys/user/revise' : '/sys/user/create';
                    let meth = this.id ? 'put' : 'post'
                    this.$baseRequest(url, this.form, {}, meth).then(res => {
                        this.$message.success(`${this.id ? '修改' : '添加'}成功`);
                        this.$emit('closeDetail', 'isFresh')
                    })
                } else {

                    return false;
                }
            });

        }
    }
}
</script>
<style>
.distribution .el-dialog__body {
    padding-top: 15px;
}
</style>
<style lang="scss" scoped></style>
  